<template>
	
	<view style="width:760rpx;height:100%;">
		<view style="display: flex;">
			<input v-model="current_url" class="border_style" />
			<button @tap="comfirm_url" style="height: 30px;border: 1rpx solid lightblue;border-radius: 5px;font-size: 11px;" >确认</button>
		</view>
		<view style="display: flex;" v-show="get_data.length>0">
			<select v-model="chose_name" style="width: 80%;height: 30px;border: 1rpx solid lightblue;border-radius: 5px;">
				<option v-for="(v,k) in get_data" :key="k" :value="v.name" >{{v.name}}</option>
			</select>
			<button @tap="refresh" style="height: 30px;border: 1rpx solid lightblue;border-radius: 5px;font-size: 11px;" >刷新</button>
		</view>
		
		<map id="map" ref="map" style="height:1010rpx;width:750rpx;" 
			:latitude="center_lat" 
			:longitude="center_lng" 
			:scale="scalema" 
			:markers="all_marker"
			:polyline="polyline"
			@markertap="map_marker_click">
		</map>
		<view>
			<view style="display: flex;justify-content: space-between;">
				<p>设备号:{{chose_info.name}}</p><p>状态:{{chose_info.dynamic.status}}</p>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<p>速度:{{chose_info.dynamic.speed}}</p>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<p>经纬度:Lng:{{chose_info.dynamic.lng}},Lat:{{chose_info.dynamic.lat}}</p>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<p>定位:{{chose_info.dynamic.track_ts}}</p>
				<p>接收:{{chose_info.dynamic.recv_ts}}</p>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<p>位置:{{location}}</p>
			</view>
			
		</view>
	</view>
</template>

<script>
	import amapWX from '@/static/amap-wx.js';
	import vuex from 'vuex';
	export default {
		data() {
			return {
				current_url:this.$store.current_url,
				polyline: [{points:[],color:"#007030",width:10,arrowLine:true,borderColor:"#006030",borderWidth:5},],
				center_lat: 35,
				center_lng: 112,
				scalema:4,
				all_marker:[],
				get_data:[],
				chose_info:{name:"",dynamic:{}},
				location:"",
				chose_name:""
				// map_key:"b1ae8d93dba9a9766861f8526c594822",
			}
		},
		onLoad() {
			this.current_url = this.$store.current_url == null?"http://192.168.0.8:18090/device_get":this.$store.current_url
			this.ajax_get_func(this.current_url,"get",this.handle_data)
		},
		methods: {
			refresh(){
				this.ajax_get_func(this.current_url,"get",this.handle_data)
			},
			comfirm_url(){
				console.log("current_url",this.current_url)
				this.$store.commit('current_url', this.current_url);
				
			},
			handle_data(d){
				console.log("data",d)
				this.get_data = d
				if(this.get_data.length >0){
					this.chose_info = this.get_data[0]
					this.chose_name = this.chose_info.name
					for(var i=0;i<this.get_data.length;i++){
							var m = this.get_data[i]
							var lnglat = [0,0]
							if(m.dynamic.lat !== "" || m.dynamic.lng !== ""){
								lnglat = [parseFloat(m.dynamic.lat),parseFloat(m.dynamic.lng)]
							}
							console.log("lnglat",lnglat)
							let icon =  "/static/default.png"
							var co = {content:m.name,borderRadius:10,color:"#007FFF",fontSize:12,display:"ALWAYS",borderRadius:2,textAlign:"center",borderColor:"#007FFF",borderWidth:1,padding:2}
							this.all_marker.push({id:i+1,callout:co,latitude: lnglat[0],iconPath:icon,longitude: lnglat[1],width:30,height:30})
							this.get_data[i].marker_id = i+1
					}
				}
				
				
			},
			chose_device(d){
				console.log("chose_device",d,this.chose_info)
			},
			map_marker_click(e){
				console.log("map_marker_click",e)
				for(var item of this.get_data){
					if (item.marker_id == e.target.markerId){
						this.chose_info = item
					}
				}
			},
			ajax_get_func(url,param,handle_func=""){
				uni.request({
					url: url+"?action="+param,
					method:"GET",
					sslVerify:false,
					success: (res) => {
						if (res.data.code==0){
							var data=res.data.data
							if(handle_func!=''){
								handle_func(data)
							}
						}else{
							uni.showToast({title:res.data.msg,icon:"none",duration:2000});
						}  
					},
					fail:(res)=>{
						// console.log("post,fail",res)
						uni.showToast({title:"请检查网络",icon:"none",duration:2000}) 
					},
				});
			},
		}
	}
</script>

<style>
	.border_style{
		width: 80%;height: 30px;border: 1rpx solid lightblue;border-radius: 5px;
	}
</style>
